<template>
  <CommonDialog
    v-model="validVisible"
    :border="false"
    width="550"
    title="设计校验"
    :show-footer="false"
  >
    <el-steps align-center :active="validIndex" finish-status="success">
      <el-step
        v-for="(step, i) in validRefs"
        :key="i"
        :title="step.name"
        :icon="step.icon"
        :status="step.status"
        :description="step.description"
      />
    </el-steps>
    <el-result :icon="validIcon" :title="errTitle" :subTitle="validResult.desc">
      <template #icon>
        <el-icon v-if="!validResult.finished" icon="Loading" size="30" class="is-loading" />
      </template>
      <template #sub-title>
        <el-scrollbar v-if="validResult.errs.length > 0">
          <div class="w-valid-err-info">
            <el-text v-for="(err, i) in validResult.errs" :key="i + '_err'" tag="div" truncated>
              <el-icon><Warning /></el-icon>
              {{ err }}
            </el-text>
          </div>
        </el-scrollbar>
      </template>
      <template #extra>
        <el-button v-if="validResult.finished" type="primary" @click="handleAfterValidate">
          {{ validResult.action }}
        </el-button>
      </template>
    </el-result>
  </CommonDialog>
</template>
<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import CommonDialog from "@/components/commonDialog.vue";

const props = defineProps({
  // validRefs: {
  //   type: Array as unknown as PropType<
  //     [{ _ref: string; name: string; status: string; icon?: string; description?: string }]
  //   >,
  //   default: () => {
  //     return [];
  //   }
  // },
  instance: {
    type: Object
  }
});

const emits = defineEmits(["success", "fail"]);
const validRefs =
  defineModel<
    { _ref: string; name: string; status: string; icon?: string; description?: string }[]
  >("validRefs");

const validVisible = ref(false);
//几个设置页面的ref
const validIndex = ref(0);
const defStatus = ref("-1");
//校验结果
const validResult = reactive({
  errs: [],
  finished: false,
  success: false,
  title: "检查中...",
  action: "去处理",
  desc: "正在检查设置项"
});

const validIcon = computed(() => {
  if (!validResult.finished) {
    return "info";
  } else if (validResult.success) {
    return "success";
  } else {
    return "warning";
  }
});

//错误信息
const errTitle = computed(() => {
  if (validResult.finished && !validResult.success) {
    return validResult.title + ` (${validResult.errs.length}项错误)`;
  }
  return validResult.title;
});

//分步校验流程表单设计
async function validate(status?: string) {
  validVisible.value = true;
  validIndex.value = 0;
  if (status) {
    defStatus.value = status;
  }
  validResult.errs = [];
  validResult.finished = false;
  validResult.success = false;
  validResult.title = "检查中...";
  validResult.action = "去处理";
  validResult.desc = "正在检查设置项";
  validRefs.value.forEach(v => (v.status = ""));
  for (let i = 0; i < validRefs.value.length; i++) {
    validIndex.value = i;
    //阻塞一下
    await new Promise(resolve => setTimeout(resolve, 500));
    await props.instance.refs[validRefs.value[validIndex.value]._ref].validate();
    validRefs.value[validIndex.value].status = "success";
  }
}

//重置校验结果
function reloadValidResult(isSuccess) {
  validResult.finished = true;
  validResult.success = isSuccess;
  validResult.desc = "";
  validResult.action = isSuccess ? (defStatus.value === "1" ? "去发布" : "去保存") : "去处理";
  validResult.title = isSuccess ? "校验成功😃" : "校验失败😥，发现";
  validRefs.value[validIndex.value].status = isSuccess ? "success" : "error";
}

const addValidResult = errs => {
  validResult.errs.push(...errs);
};

function handleAfterValidate() {
  if (validResult.success) {
    emits("success");
    validIndex.value = 0;
    validResult.errs = [];
    validResult.finished = false;
    validResult.success = false;
    validResult.title = "检查中...";
    validResult.action = "去处理";
    validResult.desc = "正在检查设置项";
    validVisible.value = false;
  } else {
    const refName = validRefs.value[validIndex.value]._ref.toUpperCase();
    validResult.errs = [];
    validResult.finished = false;
    validResult.success = false;
    validResult.title = "检查中...";
    validResult.action = "去处理";
    validResult.desc = "正在检查设置项";
    validIndex.value = 0;
    emits("fail", refName);
    validVisible.value = false;
  }
}

const getValidIndex = () => {
  return validIndex.value;
};

defineExpose({
  validate,
  reloadValidResult,
  addValidResult,
  getValidIndex
});
</script>
<style lang="scss" scoped>
.w-valid-err-info {
  max-height: 200px;
  & > div {
    display: block;
    padding: 2px 5px;
    margin: 2px;
    text-align: left;
    background: $theme-aside-bgc;
    border-radius: 5px;
  }
}
</style>
